<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk">  

    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">            
            <div class="block">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left">HỌC SINH</div>
                </div>
                <div class="block-content collapse in">

                    <div class="form-horizontal">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#home" role="tab" data-toggle="tab"><i class="icon-user"></i>Home</a></li>
                            <li><a href="#profile" role="tab" data-toggle="tab"><i class="icon-music"></i>Class</a></li>
                            <li><a href="#messages" role="tab" data-toggle="tab"><i class="icon-th-list"></i>History</a></li>
                            <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="home">
                                <div class="span12">
                                    <fieldset>
                                        <legend><h:outputText value="THÔNG TIN CÁ NHÂN"/></legend>
                                    </fieldset>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtLastName"><h:outputText value="Họ:"/> </label>
                                    <div class="controls">
                                        <h:inputText styleClass="span4" id="txtLastName" disabled="#{pupilManageBean.isView}" value="#{pupilManageBean.pupil.lastName}"/>

                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtFirstName"><h:outputText value="Tên:"/> </label>
                                    <div class="controls">
                                        <h:inputText styleClass="span3" id="txtFirstName" disabled="#{pupilManageBean.isView}" value="#{pupilManageBean.pupil.firstName}"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtAge"><h:outputText value="Sinh năm:"/></label>
                                    <div class="controls">
                                        <h:inputText styleClass="span2" id="txtAge"  disabled="#{pupilManageBean.isView}" value="#{pupilManageBean.pupil.yearOfBirth}"/>
                                      
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtParent"><h:outputText value="Phụ Huynh:"/> <i class="icon-home"></i></label>
                                    <div class="controls">
                                        <h:inputText styleClass="span4" id="txtParent"  disabled="#{pupilManageBean.isView}" value="#{pupilManageBean.pupil.mother}"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtMobile"><h:outputText value="SĐT:"/><i class="icon-headphones"></i> </label>
                                    <div class="controls">
                                        <h:inputText styleClass="span3" id="txtMobile" disabled="#{pupilManageBean.isView}"  value="#{pupilManageBean.pupil.mobile}" />
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <t:commandLink styleClass="btn btn-primary" rendered="#{!pupilManageBean.isView}" action="#{pupilManageBean.updatePupil}">Lưu</t:commandLink>
                                    <button type="reset" class="btn" onclick="window.history.back()">Hủy</button>
                                </div>
                            </div>
                            <div class="tab-pane" id="profile">
                                <t:div styleClass="block-content collapse in">
                                    <t:div styleClass="span12">
                                        <t:dataTable id="tblPipul" value="#{coursePupilBean.pageData}" var="cursor" styleClass="table table-hover"
                                                     preserveSort="true" rows="5" sortColumn="#{coursePupilBean.sort}" sortAscending="#{coursePupilBean.sortAscending}"
                                                     >

                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.courseID" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Mã Lớp"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.courseID}">
                                                </h:outputText>
                                            </t:column>
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.courseName" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Học Lớp"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.courseName}"/> 

                                            </t:column>
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.courseType" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Loại Lớp"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.courseType}">
                                                </h:outputText>
                                            </t:column>
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.status" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Tình Trạng"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.status}">
                                                </h:outputText>
                                            </t:column>
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.schedule" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Lịch Học"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.schedule}">
                                                </h:outputText>
                                            </t:column>
                                            <f:facet name="footer">
                                               
                                                <t:div styleClass="pagination pagination-right">
                                                    <ul>
                                                        <li>
                                                            <t:commandLink  value="Previous"
                                                                            disabled="#{!coursePupilBean.hasPreviousPage}"
                                                                            action="#{coursePupilBean.previousPage}"/>
                                                        </li>

                                                        <li>
                                                            <t:commandLink  value="Next"
                                                                            disabled="#{!coursePupilBean.hasNextPage}"
                                                                            action="#{coursePupilBean.nextPage}" />
                                                        </li>
                                                        <li class="active"> <a href="#"><t:outputText value="#{coursePupilBean.rowCount} row(s)"/></a>
                                                        </li>
                                                    </ul>
                                                </t:div>
                                            </f:facet>

                                        </t:dataTable>

                                    </t:div>
                                </t:div>


                            </div>
                            <div class="tab-pane" id="messages">Test3</div>
                            <div class="tab-pane" id="settings">Test4</div>

                        </div>
                    </div>

                </div>
            </div>
        </ui:define>
    </ui:composition>        

</html>  